<template>
    <view class="goods-img-status" :class="{ 'goods-img-status-small': isSmall }">{{ text }}</view>
</template>

<script setup>
const props = defineProps({
    text: { type: String, default: '已售罄' },
    isSmall: { type: Boolean, default: true }
});
</script>

<style lang="scss" scoped>
.goods-img-status {
    position: absolute;

    word-break: keep-all;

    color: #ffffff;

    font-family: PingFangSC-Regular, PingFang SC;

    font-size: 44rpx;

    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    top: 50%;

    left: 50%;

    width: 216rpx;

    height: 216rpx;

    border-radius: 50%;

    background: rgba(51, 48, 45, 0.6);
    transform: translate(-50%, -50%);
    z-index: 1;
    &::before,
    &::after {
        margin: 4px 0;
        content: '';
        top: 0;
        left: 0;
        width: 146rpx;
        height: 1px;
        background: #ffffff;
    }
}
.goods-img-status-small {
    font-size: 20rpx;
    width: 136rpx;
    height: 136rpx;
    &::before,
    &::after {
        width: 92rpx;
    }
}
</style>
